<!--
 * @Author: fisher
 * @Date: 2022-10-20 14:53:57
 * @LastEditTime: 2022-10-26 19:06:13
 * @LastEditors: fisher
 * @Description: 
 * @FilePath: \tauri_app\src\views\home\index.vue
-->
<template>
  <el-tabs
    v-model="activeName"
    type="card"
    class="demo-tabs"
    @tab-click="handleClick"
    style="with: 100%; height: 100%"
  >
    <el-tab-pane label="data" name="first">
      <f-data class="tab_inner"></f-data>
    </el-tab-pane>
    <el-tab-pane label="csv" name="second">
      <f-csv class="tab_inner"></f-csv>
    </el-tab-pane>
    <el-tab-pane label="shp" name="thired">
      <f-shp class="tab_inner"></f-shp>
    </el-tab-pane>
    <el-tab-pane label="gis_preview" name="fourth">
      <f-gis-preview class="tab_inner"></f-gis-preview>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { ref } from "vue";
import fData from "./data/index.vue";
import fCsv from "./csv/index.vue";
import fShp from "./shp/index.vue";
import fGisPreview from "./preview/index.vue";
const activeName = ref("first");

const handleClick = (tab, event) => {
  console.log(tab, event);
};
</script>
<style  scoped>
::v-deep(.el-tabs__content) {
  color: #6b778c;
  height: calc(100% - 56px);
  font-size: 32px;
  font-weight: 600;
}
::v-deep(.el-tab-pane) {
  height: 100%;
}
.tab_inner {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
</style>